<template>
    <div class="header">
        <div class="header-left">
            <span class="iconfont">&#xe624;</span>
        </div>
        <div class="header-input">
            <span class="iconfont">&#xe632;</span>
            输入城市/景点/游玩/主题</div>
        <router-link to="/City">
            <div class="header-right">
                {{this.city}}
                <span class="iconfont icon">&#xe64a;</span>
            </div>
        </router-link>
    </div>
</template>
<script>
import {mapState} from 'vuex'
export default {
  name: 'HomeHeader',
  computed: {
    ...mapState(['city'])
  }
}
</script>

<style lang="stylus" scoped>
//使用stylus编写css,并限定样式为局部样式，只对这一个组件起作用

@import '~styles/varibles.styl'
    .header{
        display:flex;
        line-height:0.86rem;
        background:$bgColor;
        color:#fff;
    }
    .header-left{
        width:0.64rem;
        float:left;
        margin-left:0.12rem;
    }
    .header-input{
        flex:1
        height:0.64rem;
        margin-top:0.12rem;
        background:#fff;
        margin-left:0.12rem;
        border-radius:0.1rem
        color:#ccc;
        line-height:0.64rem;
        padding-left:0.2rem;
    }
    .header-right{
        min-width:1.24rem;
        padding:0 0.1rem;
        float:right;
        text-align:center;
        color:#fff;
    }
    .icon{
        margin-left:-0.04rem;
        font-size:0.24rem;
    }
</style>
